<template>
  <div class="shop-list-con table-gl-w">
    <div class="search-w">
      <FilterTable :filterItem="filterItem" :isReset="true" @search="searchByVal"> </FilterTable>
    </div>
    <div class="table-gl-con mt10">
      <TableWrap style="flex: 1" @refresh="getList">
        <template #headerLeft></template>
        <template #tableBody>
          <a-table :pagination="false" class="table-two-line" :loading="loading" :data="tableData" :scroll="{ x: '100%', y: '100%' }">
            <template #columns>
              <a-table-column title="图片" :width="60" #cell="{ record }">
                <ImgPopover :src="imgUrl(record.billInfo || {})">
                  <template #con>
                    <a-image :preview="false" width="40" height="40" fit="contain" :src="imgUrl(record.billInfo || {})" />
                  </template>
                </ImgPopover>
              </a-table-column>
              <a-table-column title="SPU" :width="60" #cell="{ record }">
                {{ $extract(record, 'billInfo.spu') }}
              </a-table-column>
              <a-table-column title="绑定变体" :width="60" #cell="{ record }">
                {{ $extract(record, 'billInfo.supplierProductSkuList.length') }}
              </a-table-column>
              <a-table-column data-index="promoterName" title="认领人" :width="60" #cell="{ record }"></a-table-column>
              <!-- <a-table-column title="所在部门" :width="60" #cell="{ record }"></a-table-column> -->
              <a-table-column title="当前审核人" :width="60" #cell="{ record }">
                <div>{{ getCurCheckUser(record) }}</div>
              </a-table-column>
              <a-table-column title="申请时间" :width="130" #cell="{ record }" data-index="approvalTime" :sortable:="{ sortDirections: ['ascend', 'descend'] }">
                {{ $setTime(record.approvalTime) }}
              </a-table-column>
              <a-table-column title="审核时间" :width="130" #cell="{ record }" data-index="gmtFinished" :sortable:="{ sortDirections: ['ascend', 'descend'] }">
                {{ $setTime(record.gmtFinished) }}
              </a-table-column>
              <a-table-column title="状态" :width="40" #cell="{ record }" data-index="name" :sortable:="{ sortDirections: ['ascend', 'descend'] }">
                <div v-if="record.status === 'IN_APPROVAL'" style="color: #e59300">审核中</div>
                <div v-if="record.auditResult === 'PASS'" style="color: #0597a2">已通过</div>
                <div v-if="record.auditResult === 'REFUSE'" style="color: #e59300">拒绝</div>
              </a-table-column>
            </template>
          </a-table>
        </template>
      </TableWrap>
      <div class="pagination-footer">
        <a-pagination size="mini" :page-size-options="[20, 50, 100, 200, 500]" show-total show-page-size :total="pageNation.total" :default-page-size="pageNation.pageSize" :current="pageNation.pageNum" style="float: right" @page-size-change="sizeChange" @change="changePage" />
      </div>
    </div>
  </div>
</template>

<script lang="ts" setup>
  import { defineComponent, ref, onMounted } from 'vue'
  import { Message } from '@arco-design/web-vue'
  import { getOrganizesUser } from '@/api/system'
  import { findApprovalProcessPage } from '@/api/product'
  import FilterTable from '@/components/TableFilter.vue'
  import TableWrap from '@/components/TableWrap.vue'
  import { filter } from 'jszip'
  const filterItem: any = ref([
    {
      type: 'select_multiple',
      key: 'promoterIdList',
      optionItems: [],
      keyWidth: '120',
      value: ref(),
      label: '认领人',
      width: 160,
      isMultiple: true,
    },

    {
      type: 'select',
      key: 'status',
      optionItems: [
        { label: '审核中', value: 'IN_APPROVAL' },
        { label: '已通过', value: 'PASS' },
        { label: '拒绝', value: 'REFUSE' },
        // { label: '终止', value: 'CLOSE' },
      ],
      keyWidth: '120',
      value: ref(),
      label: '状态',
      width: 160,
      isMultiple: true,
    },
    {
      type: 'keyword_date_range',
      key: 'approvalTime',
      keyItems: [
        { label: '申请时间', value: 'approvalTime' },
        { label: '审核时间', value: 'gmtFinished' },
      ],
      keyWidth: '100',
      value: ref(),
      placeholder: '请输入',
      label: '开始日期',
      width: 240,
    },
    {
      type: 'input_keyword_type',
      key: 'otherDataJson.spu',
      keyItems: [{ label: 'SPU', value: 'otherDataJson.spu', isNoFuzzy: true }],
      keyWidth: '100',
      value: ref(),
      placeholder: '请输入',
      label: 'SPU',
      width: 160,
      isMultiple: true,
    },
  ])
  let tableData = ref([{}])
  let loading = ref(false)
  let searchValue = ref({})
  let pageNation = ref({ total: 0, pageNum: 1, pageSize: 20 })

  // 搜索
  const searchByVal = (info: any) => {
    searchValue.value = info
    getList()
  }
  // 分页
  const changePage = (val: number) => {
    pageNation.value.pageNum = val
    getList()
  }

  const sizeChange = (val: number) => {
    pageNation.value.pageNum = 1
    pageNation.value.pageSize = val
    getList()
  }

  const getList = async () => {
    let params: any = {
      ...searchValue.value,
      approvalType: 'SUPPLIER_PRODUCT_SPU_CLAIM_APPROVAL',
      needBillData: true,
      pageNum: pageNation.value.pageNum,
      pageSize: pageNation.value.pageSize,
    }

    if (params.startDate) {
      params.startDate = `${params.startDate} 00:00:00`
      params.endDate = `${params.endDate} 23:59:59`
    } else {
      delete params.startDate
      delete params.endDate
    }

    if (params.status && ['PASS', 'REFUSE', 'CLOSE'].includes(params.status)) {
      params.auditResult = params.status
      delete params.status
    }

    loading.value = true
    const res: any = await findApprovalProcessPage(params)
    loading.value = false
    if (res) {
      tableData.value = res?.data?.records
      pageNation.value.total = res?.data.total
    }
  }

  const getCurCheckUser = (record: any) => {
    let arr = record.currentAuditors || []
    return arr.map((e: any) => e.userName).join(',')
  }

  const imgUrl = (data: any) => {
    let arr = data?.productPicList || []
    if (arr.length > 0) {
      return arr[0].url
    } else {
      return ''
    }
  }

  const getUserList = async () => {
    let params = {
      depart: false,
      pageNum: 1,
      pageSize: 1000,
    }
    const res: any = await getOrganizesUser(params)
    filterItem.value[0].optionItems = res.data.records.map((e: any) => {
      e.label = e.userName
      e.value = e.id
      return e
    })
  }

  onMounted(() => {
    getList()
    getUserList()
  })
</script>

<style lang="less" scoped>
  .shop-list-con {
    height: calc(100vh - @menuAndTabHeight);
  }
</style>
